import React from "react";
import { Link } from "react-router-dom"
import PageTitle from "component/page-title/index.jsx";
import Pagination from "component/pagination";
import TableList from 'component/table-list'
import ListSearch from './list-search'

import Product from "@/service/product-service.jsx";
import Mutils from "@/utils/index.jsx";

const _product = new Product();
const _mm = new Mutils();

class ProductList extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			pageNum: 1,
			list: [],
			listType:"list"
		};
	}
	componentWillMount() {
		document.title = "商品列表 -IMOOC Admin";
	}
	componentDidMount() {
		this.loadProductList();
	}
	loadProductList() {
		let listParam = {
			pageNum: this.state.pageNum,
			listType:this.state.listType,
			searchType:this.state.listType === 'search' ? this.state.searchType : null,
			keyWord : this.state.listType === 'search' ? this.state.searchKeyWord : null
		};
		_product
			.getProductList(listParam)
			.then(
				res => {
					this.setState(res.data);
				},
				err => {
					this.setState({
						list: []
					});
					_mm.errorTips(err);
				}
			);
	}
	handlePageChange(pageNum) {
		this.setState(
			{
				pageNum
			},
			() => {
				this.loadProductList();
			}
		);
	}
	handleStatusChange(e,productId,curStatus) {
		let newStatus = curStatus === 1 ? 2 : 1,
			confirmTips = curStatus === 1 ? '确定要下架该商品吗？' : '确定要上架该商品吗？';
		if(window.confirm(confirmTips)){
			_product.setProductStatus({
				productId,
				status:newStatus
			}).then(res => {
				_mm.successTips(res.data)
				this.loadProductList();
			},errMsg => {
				_mm.errorTips(errMsg);
			})
		}
	}
	handleSearch(type,kw) {
		let listType = kw.trim() === '' ? 'list' : 'search';
		this.setState({
			listType,
			pageNum:1,
			searchType:type,
			searchKeyWord:kw
		},() => {
			this.loadProductList();
		})
	}
	render() {
		let tableHeads = ['商品ID', '商品信息', '价格', '状态', '操作'];
		return (
			<div id="page-wrapper">
				<PageTitle title="商品列表">
					<div className="page-header-right">
						<Link to="/product/save" className="btn btn-primary">
							<i className="fa fa-plus"></i>&nbsp;添加商品
						</Link>
					</div>
				</PageTitle>
				<ListSearch onSearch={(type,keyword) => this.handleSearch(type,keyword)} />
				<TableList tableHeads={tableHeads}>
					{
						this.state.list.length > 0 ? (
						this.state.list.map(v => (
							<tr key={v.id} align="center">
								<td style={{verticalAlign:"middle"}}>{v.id}</td>
								<td align="left" style={{paddingLeft:"10%",verticalAlign:"middle"}}>
									<span>
										名称：{v.name}
									</span><br/>
									<span>
										描述：{v.subtitle}
									</span>
								</td>
								<td style={{verticalAlign:"middle"}}>￥{v.price}</td>
								<td style={{verticalAlign:"middle"}}>
									<span>{v.status === 1 ? '在售':'已下架'}</span>
									<button className="btn btn-xs btn-primary" onClick={e => this.handleStatusChange(e,v.id,v.status)} style={{float:"right"}}>{v.status === 1 ? '下架':'上架'}</button>
								</td>
								<td style={{verticalAlign:"middle"}}>
									<Link to={`/product/detail/${v.id}`}>查看详情</Link>&emsp;
									<Link to={`/product/save/${v.id}`}>编辑</Link>
								</td>
							</tr>
						))
					) : (
							<tr align="center">
								<td colSpan={tableHeads.length}>暂无数据！</td>
							</tr>
						)
					}
				</TableList>
				<div
					className="pagination"
					style={{ display: "flex", justifyContent: "flex-end" }}
				>
					<Pagination
						total={this.state.total}
						current={this.state.pageNum}
						onChange={pageNum => this.handlePageChange(pageNum)}
					/>
				</div>
			</div>
		);
	}
}

export default ProductList;
